<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列对象</title>
    <script>
        function f1(){
            let s1 = document.getElementById("s1");
            // 在HTML中,每存在一个select标签在DOM中就会存在一个与之对应的Select对象
            // console.log(s1);
            // 返回当前下拉列中所有的选项所对应的Option对象数组
            // 数组中的每一个元素对应一个Option对象
            // 在HTML中,每一个option标签在DOM中就会存在一个与之对应的Option对象
            //let ops = s1.options;
            // console.log(ops);
            // for(let i = 0; i < ops.length; i++){
            //     // console.log("value属性:"+ops[i].value+",标签体:"+ops[i].innerHTML);
            //     // console.log("value属性:"+ops[i].value+",标签体:"+ops[i].innerText);
            //     // 在下拉列的操作中,选项的标签体内容又称之为文本值
            //     // value属性值又称之为服务器值
            //     // 在下拉列里面提供了一个便携的用于访问文本值的属性:text
            //     console.log("value属性:"+ops[i].value+",标签体:"+ops[i].text);
            // }
            // console.log("当前所选择的选项的索引:"+s1.selectedIndex);
            // console.log("当前所选择的选项的服务器值:"+ops[s1.selectedIndex].value+",文本值:"+ops[s1.selectedIndex].text);
            // 简写用法
            console.log("当前所选择的选项的服务器值:"+s1[s1.selectedIndex].value+",文本值:"+s1[s1.selectedIndex].text);
        }
        function f2(){
            // let op = document.createElement("option")
            // ...

            // 在js中,提供的Option对象默认存在一个构造函数
            // new Option(text,value)
            let inText = document.getElementById("inText").value;
            let inValue = document.getElementById("inValue").value;
            // let op = new Option(inText,inValue);
            let s1 = document.getElementById("s1");
            // s1.appendChild(op);

            // js的数组长度是可变的
            // 数组中的每一个元素对应的是一个option标签
            // 通过改变下拉列的options数组的元素导致页面重新渲染
            // 想要增加一个新的选项,那么就是在数组中追加一个新的Option元素
            let ops = s1.options;
            // ops[ops.length-1+1]
            // ops[ops.length] = op;
            // s1[s1.length] = op;
            // s1[s1.length] = new Option(inText,inValue);
            ops[ops.length] = new Option(inText,inValue);

        }

        function f3(){
            let inText = document.getElementById("inText").value;
            let inValue = document.getElementById("inValue").value;
            let s1 = document.getElementById("s1");

            s1[s1.selectedIndex] = new Option(inText,inValue);
        }

        function f4(){
            // 在js中,如果options数组中存在非Option对象元素,会自动跳过
            // 非Option元素不会在页面中有任何的体现
            // 相当于没有这个元素
            let s1 = document.getElementById("s1");
            // console.log(s1.options.length);  // 4
            // s1[1] = null;
            // console.log(s1.options.length);  // 3
            // 即:当将某一个元素值设置为null时,相当于删除了该元素,且选项长度-1
            s1[s1.selectedIndex] = null;
        }
        function f5(){
            let s1 = document.getElementById("s1");
            // let ops = s1.options;
            // i = 1,删除了第一个,长度改变
            // 原来的第二个变成了第一个
            // 此时改变时需要降序
            // for(let i = 0; i < ops.length; i++){
            //     ops[i] = null;
            // }
            // for(let i = ops.length-1 ; i >= 1; i--){
            //     ops[i] = null;
            // }

            s1.length = 1;
        }
    </script>
</head>
<body>
服务器值:<input type="text" id="inValue"><br>
文本值:<input type="text" id="inText"><br>
<button onclick="f1()">查看当前选项</button>
<button onclick="f2()">添加</button>
<button onclick="f3()">修改选中项</button>
<button onclick="f4()">删除选中项</button>
<button onclick="f5()">清空</button>
<hr>
<!--<select id="s1" onchange="f1()">-->
<select id="s1">
    <option value="-1">请选择</option>
    <option value="1">aaa</option>
    <option value="2">bbb</option>
    <option value="3">ccc</option>
</select>
</body>
</html>